<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .like {
            margin: 0;
            padding: 0;
            display: flex;
        }
        .like li {
            list-style: none;
            margin-right: 10px;
        }
    </style>
  </head>
  <body>
    <div id="app">
        <div>请选择你喜欢的专栏</div>
        <ul class="like">
            <li v-for="(item,index) in listWithCheck" :key="item.id" >
                <input type="checkbox" name="interest" id="" v-model="item.isChecked" @click="like(item)">
                <span>{{item.name}}</span>
            </li>
        </ul>
        <ul v-show="likeList.length" v-for="item in likeList">
            <li>{{item}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
            list:["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
            listWithCheck:[],
            likeList:[]
        },
        methods:{
            like(item){
                // 如果当前已经被选中
                if (item.isChecked){
                    // 点击从喜欢列表中移出
                    const index = this.likeList.findIndex(ele => ele === item.name)
                    this.likeList.splice(index,1)
                    // 取消喜欢
                }else {
                    // 当前没有被选中
                    this.likeList.push(item.name)
                }
                item.isChecked = !item.isChecked
            }
        },
        mounted(){
            this.listWithCheck = this.list.map(ele =>  {
              return {
                id: Date.now(),
                name:ele,
                isChecked:false
              }
            })
            console.log('list',this.listWithCheck);
            
        }
      });
    </script>
  </body>
</html>
